Blaze হলো Meteor এর ডিফল্ট টেম্পলেট ইঞ্জিন যা ডাইনামিক ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত হয়। এটি HTML টেম্পলেট ব্যবহার করে ইউজার ইন্টারফেস তৈরি করার প্রক্রিয়াটি সহজ করে তোলে এবং ডেটার পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে UI-তে রেন্ডার হয়।
Blaze টেম্পলেট ইঞ্জিনের মাধ্যমে ডেটা ডাইনামিকভাবে আপডেট করা এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ। নিচে Blaze টেম্পলেট ইঞ্জিন ব্যবহার করার প্রাথমিক ধাপগুলো দেওয়া হলো।
Blaze টেম্পলেট ইঞ্জিন ব্যবহার করার ধাপ
ধাপ ১: Blaze প্যাকেজ যোগ করা
যদিও Meteor ডিফল্টভাবে Blaze সাপোর্ট করে, আপনি যদি Blaze প্যাকেজটি নিশ্চিত করতে চান, তবে এটি আপনার প্রজেক্টে যোগ করতে পারেন:
meteor add blaze-html-templates
এটি Blaze টেম্পলেট ইঞ্জিনের HTML টেম্পলেট সিস্টেম সরবরাহ করবে।
ধাপ ২: HTML টেম্পলেট তৈরি করা
Blaze টেম্পলেট ইঞ্জিনের মাধ্যমে HTML টেম্পলেট তৈরি করা হয় যেটি UI রেন্ডার করতে ব্যবহৃত হবে। সাধারণত টেম্পলেটগুলি .html এক্সটেনশনে তৈরি হয়।
<!-- myTemplate.html -->
<head>
<title>My Blaze App</title>
</head>
<body>
<h1>{{title}}</h1>
<ul>
{{#each todos}}
<li>{{this.text}}</li>
{{/each}}
</ul>
</body>
এখানে {{title}} এবং {{#each todos}} হল Blaze-এর হেল্পার এবং হ্যান্ডেলবার্স সিনট্যাক্স যা ডাইনামিক ডেটা রেন্ডার করে।
ধাপ ৩: টেম্পলেটের জন্য হেল্পার ফাংশন তৈরি করা
Blaze টেম্পলেটে ডাইনামিক ডেটা রেন্ডার করতে হেল্পার ফাংশন ব্যবহার করা হয়। আপনি JavaScript ফাইলে হেল্পার ফাংশন তৈরি করতে পারেন।
// client/main.js
import { Template } from 'meteor/templating';
import { Mongo } from 'meteor/mongo';
import './myTemplate.html';
// ডেটাবেস কোলেকশন
const Todos = new Mongo.Collection('todos');
// হেল্পার ফাংশন
Template.body.helpers({
title() {
return 'My Todo List';
},
todos() {
return Todos.find(); // ডেটাবেস থেকে todos ফিরিয়ে দেয়
},
});
এখানে Template.body.helpers এর মাধ্যমে title এবং todos নামক ডেটা প্রদর্শন করা হয়। Todos.find() কোলেকশন থেকে ডেটা ফেচ করে UI-তে রেন্ডার হয়।
ধাপ ৪: ইভেন্ট হ্যান্ডলিং
Blaze টেম্পলেটের মধ্যে ইভেন্ট হ্যান্ডলার ব্যবহার করে ইউজার ইন্টারঅ্যাকশনকে হ্যান্ডেল করা যায়। আপনি কীভাবে ইভেন্টগুলো ক্যাপচার করবেন এবং তা কীভাবে প্রসেস করবেন তা নির্ধারণ করতে পারেন।
// client/main.js
Template.body.events({
'submit .new-todo'(event) {
event.preventDefault();
const text = event.target.text.value;
Todos.insert({
text,
createdAt: new Date(),
});
event.target.text.value = ''; // ইনপুট ক্লিয়ার করা
},
});
এখানে, আমরা একটি নতুন todo যোগ করার জন্য submit ইভেন্ট হ্যান্ডল করছি। Todos.insert এর মাধ্যমে ডেটা MongoDB কোলেকশনে যোগ করা হচ্ছে এবং ইনপুট ফিল্ডটি পরে ক্লিয়ার হচ্ছে।
ধাপ ৫: টেম্পলেট রেন্ডার করা
Blaze টেম্পলেটকে HTML পৃষ্ঠায় রেন্ডার করতে, আপনি সাধারণত একটি রুট টেম্পলেট ব্যবহার করবেন যেখানে সব টেম্পলেট গুলি একত্রিত হবে।
<!-- main.html -->
<body>
{{> myTemplate}} <!-- এই টেম্পলেটটি ইনক্লুড হবে -->
</body>
এটি myTemplate.html টেম্পলেটকে মূল HTML ফাইলে রেন্ডার করবে। {{> myTemplate}} সিম্বলটি Blaze এর টেম্পলেট ইনক্লুড নির্দেশক।
Blaze এর কিছু প্রধান বৈশিষ্ট্য
- ডাইনামিক রেন্ডারিং:
Blaze ক্লায়েন্ট সাইডে ডেটা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে UI রেন্ডার করে, এটি রিয়েল-টাইম ডেটা আপডেটের জন্য আদর্শ। - হেল্পার এবং ইভেন্ট:
Blaze টেম্পলেটেhelpersএবংeventsব্যবহার করে ডাইনামিক ডেটা এবং ইউজার ইন্টারঅ্যাকশন হ্যান্ডল করা যায়। - এলিমেন্ট হ্যান্ডলিং:
Blaze টেম্পলেটের মধ্যে আপনি{{#each}},{{#if}},{{#unless}}ইত্যাদি লুপ এবং শর্ত ব্যবহারের মাধ্যমে ডাইনামিক কনটেন্ট রেন্ডার করতে পারেন। - সহজ ইন্টিগ্রেশন:
Blaze Meteor এর সাথে সহজে ইন্টিগ্রেট করা যায় এবং এটি সরাসরি Meteor এর ডিফল্ট টেম্পলেট ইঞ্জিন হিসেবে ব্যবহৃত হয়।
সারাংশ
Blaze টেম্পলেট ইঞ্জিন Meteor অ্যাপ্লিকেশন ডেভেলপমেন্টে ডাইনামিক ইউজার ইন্টারফেস তৈরি করার জন্য একটি শক্তিশালী টুল। এটি HTML টেম্পলেট এবং JavaScript হেল্পার এবং ইভেন্ট ব্যবহার করে ইউজার ইন্টারফেস রেন্ডারিং ও ইন্টারঅ্যাকশন সহজ করে তোলে। Blaze টেম্পলেট ইঞ্জিনের মাধ্যমে ডেটা রিয়েল-টাইমে আপডেট হয় এবং অ্যাপ্লিকেশনটি ইন্টারঅ্যাকটিভ হয়।
